<template>
    <div ref="chart" class="chart-render-box"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
const props = defineProps({
    xData: {
        type: Array,
        default: () => [],
    },
    sData: {
        type: Array,
        default: () => [],
    },
})
const linexData = ref([
    '1月',
    '2月',
    '3月',
    '4月',
    '5月',
    '6月',
    '7月',
    '8月',
    '9月',
    '10月',
    '11月',
])
const linesData = ref([764, 482, 430, 505, 384, 453, 1160, 637, 897, 930, 1596])
// const linesData1 = ref([237, 105, 471, 236, 479, 189, 234, 123, 345, 246, 89, 199])
const option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow',
        },
    },
    grid: {
        top: '13%',
        right: '5%',
        left: '5%',
        bottom: '5%',
        containLabel: true,
    },
    // legend: {
    //     show: true,
    //     top: '2%',
    //     textStyle: {
    //         color: '#FFFFFF',
    //     },
    //     type: 'scroll'
    // },
    xAxis: [
        {
            type: 'category',
            data: linexData.value,
            axisLine: {
                lineStyle: {
                    color: 'rgba(0, 128, 255, 0.36)',
                },
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                margin: 10,
                color: 'rgba(255,255,255,1)',
                textStyle: {
                    fontSize: 12,
                },
                // formatter: function(e) {
                //     let str = ''
                //     let arr = e.split('')
                //     for (let i = 0; i < arr.length; i++) {
                //         str += arr[i] + '\n'
                //     }
                //     return str
                // },
            },
        },
    ],
    yAxis: [
        {
            name: '',
            nameLocation: 'end',
            nameTextStyle: {
                align: 'center'
            },
            axisLabel: {
                formatter: '{value}',
                color: '#4B779B',
            },
            axisLine: {
                show: false,
            },
            splitLine: {
                lineStyle: {
                    type: 'dashed',
                    color: 'rgba(108, 128, 151, 0.3)',
                },
            },
        },
    ],
    series: [
        {
            type: 'bar',
            name: '月份',
            data: linesData.value,
            barWidth: 10,
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: '#00FFBF',
                        },
                        {
                            offset: 1,
                            color: '#1EE7A7',
                        },
                    ]),
                },
            },
        },
        // {
        //     type: 'bar',
        //     name: '行业类目',
        //     data: linesData1.value,
        //     barWidth: 10,
        //     itemStyle: {
        //         normal: {
        //             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        //                 {
        //                     offset: 0,
        //                     color: '#0286FF',
        //                 },
        //                 {
        //                     offset: 1,
        //                     color: 'rgba(24,144,255,0.65)',
        //                 },
        //             ]),
        //         },
        //     },
        // },
    ],
}
const chart = ref()
onMounted(() => {
    chart.value.removeAttribute('_echarts_instance_')
    const myChart = echarts.init(chart.value)
    myChart.setOption(option)
})
</script>
<style scoped lang="scss">
.chart-render-box {
    width: 100%;
    height: 100%;
    flex: 1;
}
</style>
